// src/directives/focus.js
/*
 * 自定义指令: v-focus
 * 功能: 当元素被插入到 DOM 后，立即使其获得焦点，并为其父元素添加边框实现高亮
 */
const focus = {
  inserted(el) {
    // 判断元素是否存在且有 focus 方法  
    if (el && typeof el.focus === 'function') {
      setTimeout(() => {
        el.focus()
      }, 0)
      // 失去焦点时移除边框
      el.addEventListener('blur', () => {
        el.style.border = ''
      })
    }
  },
  // 当指令被解绑时，移除高亮样式
  unbind(el) {
    if (el && el.parentNode) {
      el.parentNode.style.border = ''
      el.parentNode.style.borderRadius = ''
    }
  }
}

export default focus